<!-- 添加产品 -->
<template>
    <div v-if="jjnser">
    <div class="page-box  display-flex czbj">
        <p class="title-label mb10">
            产品基本信息
        </p>

        <n-form ref="formRef" :model="form" :rules="rules" label-width="120" :inline="false" size="normal"
            label-placement="left" class="mt20 sdfsdtrrter">
            <n-grid :cols="24" :x-gap="20" :y-gap="20">
                <n-form-item-gi span="24" label="产品名称:" path="sort">
                   <n-input v-model:value="form.title" type="text" placeholder="请输入产品名称" size="medium" clearable @change=""></n-input>
                   
                </n-form-item-gi>
                <n-form-item-gi span="12" label="封面:" path="cover">
                    <div class="logo-context vertical-center aa">
                        <upFile :pimgurl="form.cover" FileTitle="产品封面" @getFile="(data) => form.cover = data"></upFile>
                    </div>
                </n-form-item-gi>
                <n-form-item-gi span="12" label="类别:" path="sort">
                    <n-select v-model:value="form.sort" size="medium" :options="options" clearable />
                </n-form-item-gi>
            </n-grid>
        </n-form>
    </div>

    <div class="page-box  display-flex czbj mt10">
        <p class="title-label mb10">
            产品详情<span class="z9 fz12">(tab项目如为空将不在小程序展示)</span>
        </p>
        <div class="sdfsdtrrter">
            <n-tabs type="line" animated v-model:value='hhnse'>
                <n-tab-pane name="1" tab="设计理念">
                    <div class=" display-flex">
                        <div class="kkkmxerwe vertical-center tr">
                            标题：
                        </div>
                        <div class="flex-1">
                            <n-input v-model:value='jjnsea.title' type="text" placeholder="" size="medium" clearable
                                @change=""></n-input>
                        </div>
                    </div>
                    <div class=" display-flex mt10">
                        <div class="kkkmxerwe  tr">
                            简介：
                        </div>
                        <div class="flex-1">
                            <n-input type="textarea" v-model:value='jjnsea.subheading' placeholder="" size="medium"
                                clearable @change=""></n-input>
                        </div>
                    </div>
                    <div class=" display-flex mt10">
                        <div class=" display-flex  flex-1">
                            <div class="kkkmxerwe  tr">
                                视频地址：
                            </div>
                            <div class="flex-1">
                                <div class="logo-context vertical-center pr">

                                    <upFile :pimgurl="jjnsea.cover" FileTitle="设计理念视频" @getFile="(data) => {jjnsea.videoUrl = data.url; jjnsea.cover=data.imgurl}"
                                        accept=".mp4,.m4v" v-if="jjser"></upFile>
                                   

                                        <i class="iconfont dx-closefill sdfsdrtrt" @click.stop="closesert" v-if="jjnsea.videoUrl"></i>
                                </div>
                            </div>
                        </div>

                        <div class=" display-flex  flex-1">
                            <div class="kkkmxerwe  tr">
                                图片背景：
                            </div>
                            <div class="flex-1">
                                <div class="logo-context vertical-center aa">
                                    <upFile :pimgurl="jjnsea.bgurl" FileTitle="图片背景" @getFile="(data) => jjnsea.bgurl = data"></upFile>
                                </div>
                            </div>
                        </div>
                        <div class=" display-flex  flex-1">
                            <div class="kkkmxerwe  tr">
                                字体颜色：
                            </div>
                            <div class="flex-1">
                                <n-color-picker v-model:value="jjnsea.color" />
                            </div>
                        </div>
                    </div>

                </n-tab-pane>
                <n-tab-pane name="2" tab="核心优势">

                    <div class=" kjmklsertwe mt10">
                        <div class="logo-context aa pr" v-for="(item, idx) in jjnseb" :key="idx">
                            <img :src="item" class="w100 h100 imgcz" />
                            <i class="iconfont dx-closefill red ckklksertr" @click="jjnseb.splice(idx, 1);"></i>
                        </div>
                        <div class="logo-context vertical-center aa">
                            <upFile FileTitle="核心优势" @getFile="(data) => jjnseb.push(data)" more="2"></upFile>
                        </div>
                    </div>

                </n-tab-pane>
                <n-tab-pane name="3" tab="临床应用">
                    <div class=" display-flex">
                        <div class="kkkmxerwe vertical-center tr">
                            标题：
                        </div>
                        <div class="flex-1">
                            <n-input v-model:value='jjnsec.title' type="text" placeholder="" size="medium" clearable
                                @change=""></n-input>
                        </div>
                    </div>
                    <p class="mt10">轮播图:</p>
                    <div class=" kjmklsertwe mt10">
                        <div class=" display-flex czbj" v-for="(item, idx) in jjnsec.banner" :key="idx">
                            <n-input v-model:value='item.href' type="text" placeholder="跳转链接" size="medium" clearable
                                @change=""></n-input>

                            <div class="logo-context aa pr mt10">
                                <img :src="item.img" class="w100 h100 imgcz" />
                                <i class="iconfont dx-closefill red ckklksertr" @click="jjnsec.banner.splice(idx, 1);"></i>
                            </div>
                        </div>
                        <div class="logo-context vertical-center aa">
                            <upFile FileTitle="临床应用" @getFile="(data) => jjnsec.banner.push({ href: '', img: data, })"
                                more="2">
                            </upFile>
                        </div>
                    </div>


                </n-tab-pane>
                <n-tab-pane name="4" tab="循证数据">
                    <div class=" display-flex ">
                        <div class="kkkmxerwe  tr">
                            图片背景：
                        </div>
                        <div class="flex-1">
                            <div class="logo-context vertical-center aa">
                                <upFile :pimgurl="jjnsed" FileTitle="循证数据" @getFile="(data) => jjnsed = data"></upFile>
                            </div>
                        </div>
                    </div>
                </n-tab-pane>
                <n-tab-pane name="5" tab="学术感知">
                    <n-button type="primary" size="medium" @click="showModal = true"
                        style="width: auto;">点击添加学术感知</n-button>
                    <div class="lkkjksetrx mt20">
                        <div class=" display-flex btm pt10 pm10 pd" v-for="(item, idx) in jjhnbxer">
                            <img :src="item.cover" class="imgjz sdfsdtrtrt" />
                            <div class="flex-1 pl10">
                                <p class="fz16 z3 dsfsdrterr">{{ item.title }}</p>
                                <p class="mt10 z9 fz14">
                                    <i class="iconfont dx-shijian z9 fz14"></i>
                                    <span class="ml5">{{ item.addTime }}</span>
                                </p>
                            </div>
                            <div class="kkmmxerrw vertical-center" @click="jjhnbxer.splice(idx, 1);">
                                删除
                            </div>
                        </div>
                    </div>
                </n-tab-pane>
            </n-tabs>
        </div>

        <n-modal v-model:show="showModal" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>活动列表</div>
            </template>
            <div>
                <managementActivities pup="2" @callBack="ahjhnxser"></managementActivities>
            </div>
        </n-modal>
        <div class="jkjnjmxertw  vertical-center">
            <div>
                <n-button size="medium" @click="callBack">返回</n-button>
                <n-button type="primary" size="medium" @click="saveFun" class="ml20">保存</n-button>
            </div>
        </div>
    </div>
</div>
</template>
<script lang='ts' setup>
import { ref } from "vue";
import { dxget, callBack, dxpost,qurl } from "../../util/index"
import upFile from "../../components/util/upFile.vue";
import managementActivities from "./managementActivities.vue"
const Userid = ref(localStorage.id)
const apiurl = "xjyx/xjyxproductManagement"
const hhnse = ref("1")
const jjnser = ref(false)
const iscz = ref(false) // true为编辑的状态
const showModal = ref(false)
const cz = qurl()
const jjnsea = ref({
    title: "",
    subheading: "",
    videoUrl: "",
    bgurl: "",
    color:""
})
const jjnseb = ref([])
const jjser = ref(true)
const jjnsec = ref({
    title: "",
    banner: []
})
const jjnsed = ref()
const jjnsee = ref([])
const jjhnbxer = ref([])
const form = ref({
    title:"",
    cover: "",
    sort: ""
})
const options = ref([])
const rules = ref()

const getcptype = async () => {
    const { data }: any = await dxget("dxgjAdmin/getzd?name=xjproductClassification", { roid: Userid.value })
    options.value = data
}
getcptype()
const ahjhnxser = async (rd) => {
    showModal.value = false
    const { data }: any = await dxget("xjyx/api/getxjyxmanagemenIds", { ids: rd })
    data.map(a => {
        jjhnbxer.value.push(a)
    })
}
// 保存按钮触发
const saveFun = async () => {
    if (!form.value.title) {
        window.$message.error("请输入产品名称")
        return
    }
    if (!form.value.cover) {
        window.$message.error("请上传产品封面")
        return
    }
    if (!form.value.sort) {
        window.$message.error("请选择产品分类")
        return
    }
    let designPhilosophy = "",
        coreAdvantage = "",
        clinicalApplication = "",
        EvidenceBasedData = "",
        AcademicPerception = ""
    try {
        designPhilosophy = JSON.stringify(jjnsea.value)
    } catch (e) {

    }
    try {
        coreAdvantage = JSON.stringify(jjnseb.value)
    } catch (e) {

    }
    try {
        clinicalApplication = JSON.stringify(jjnsec.value)
    } catch (e) {

    }

    try {
        EvidenceBasedData = JSON.stringify(jjnsed.value)
    } catch (e) {

    }
    try {
        const idsd = []
        jjhnbxer.value.map(a => {
            idsd.push(a.id)
        })
        AcademicPerception = idsd.join(",")
    } catch (e) {

    }
    const { errno }: any = await dxpost(apiurl, {
        id:cz.id,
        ...form.value,
        designPhilosophy,
        coreAdvantage,
        clinicalApplication,
        EvidenceBasedData,
        AcademicPerception
    },iscz.value?'put':"post")
    if (errno == 0) {
        window.$message.success("操作成功!")
        callBack()
    }
}
const id = cz.id
const initData = async()=>{
    const {data}:any  = await dxget(apiurl,{id})
    jjnser.value = true
    form.value.title = data.title
    form.value.cover = data.cover
    form.value.sort = data.sort
    jjnsea.value = JSON.parse(data.designPhilosophy)
    jjnseb.value = JSON.parse(data.coreAdvantage)
    jjnsec.value = JSON.parse(data.clinicalApplication)
    jjnsed.value = JSON.parse(data.EvidenceBasedData)
    ahjhnxser(data.AcademicPerception)
}
if(id){
    initData()
    iscz.value = true
}else{
    jjnser.value = true
}
const closesert = ()=>{
    jjnsea.value.cover='';
    jjnsea.value.videoUrl=''
    jjser.value = false
    setTimeout(() => {
        jjser.value = true
    }, 100);
}




</script>
<style scoped>
.sdfsdtrrter {
    width: 800px;
}

.logo-context.aa {
    width: 150px;
    height: 228px;
}

.kkkmxerwe {
    width: 120px;
}

.kjmklsertwe {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px
}

.sdfsdtrtrt {
    width: 150px;
    height: 90px;
}

.dsfsdrterr {
    height: 55px;
}

.kkmmxerrw {
    width: 12px;
    color: #fff;
    padding-left: 15px;
    padding-right: 15px;
    background: red;
    cursor: pointer;

}
.sdfsdrtrt{
    position: absolute;
    right: -10px;
    top: -20px;
    z-index: 999;
    font-size: 40px !important;
    cursor: pointer;
    /* background: #fff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    text-align: center;
    line-height: 1; */
}
</style>